
$(function(){


    //小图切换中图
    $(".ulBox ul li img").hover(function(){
    	//获取src的字符串
        var imgSrc = $(this).attr("src");
        //console.log(imgSrc); 
        //从"."处截断字符串
       	var a = imgSrc.split(".");
       	//console.log(a);  
       	//拼接中图和大图
        var imgSrc_mid = a[0] + "-mid."+ a[1];
        var imgSrc_big =  a[0] + "-big."+  a[1];
		//把拼接好的图放到相应的位置
        $("#midImg").attr({"src":imgSrc_mid,"jqimg":imgSrc_big});
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
    
    var picture = $(".imgBox");//找到中图显示区
    var jpZoomPup = $(".jpZoomPup");   //放大镜
    var zoomdiv= $(".zoomdiv"); //放大显示区窗口
    var Img= $(".zoomdiv img");
    $(".jpZoomPup").hide();//页面加载时隐藏
    $(".zoomdiv").hide();//页面加载时隐藏
    picture.on("mouseenter",function () {//绑定事件
            var img=$(this).find("img").attr("jqimg");//获取当前的src属性值         
            //console.log(img)
            $(".zoomdiv img").attr("src",img);//放入大图区                     
            $(".jpZoomPup").show();//显示
            $(".zoomdiv").show();//显示
    })
    
    
    /*picture.on("mousemove",function (e) {  //绑定事件 获取键盘位置
        var e=e||window.event ;//把位置赋给e
        var x=e.pageX - picture.offset().left - jpZoomPup.width()/2;//鼠标距离文档的宽度-当前元素距离文档的宽度-选择区的一半
        var y=e.pageY-picture.offset().top  -jpZoomPup.height()/2;//
        // console.log(y)
        if(x<0){
            x=0;
        }else if(x>picture.width()-jpZoomPup.width()){
            x=picture.width()-jpZoomPup.width()
        }
        if(y<0){
            y=0;
        }else if(y>picture.height()-jpZoomPup.height()){
            y=picture.height()-jpZoomPup.height()
        }
        //console.log(y)
        jpZoomPup.css({
            top:y,
            left:x
        })
        var percentX=x/(picture.width()-jpZoomPup.width());
        var percentY=y/(picture.height()-jpZoomPup.height());
        var xx=-percentX*(Img.width()-zoomdiv.width());
        var yy=-percentY*(Img.height()-zoomdiv.height());
        //console.log(xx)
        Img.css({
            top:yy,
            left:xx,
            width:picture.width()*2,
            height:picture.height()*2
        })
    })*/





    /*picture.on("mouseleave",function(){//
        $(".zoomdiv").hide();//
        $(".jpZoomPup").hide();//
    })*/
    
    
    
});